<template>
  <dom />
</template>
<script lang="ts" setup>
import { computed, h, resolveComponent } from 'vue'
import { CopyOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { cloneDeep } from 'lodash-es'
const emits = defineEmits(['copyItem', 'deleteItem', 'activeItem', 'update:value'])
const props = defineProps({
  item: {
    type: Object,
    default: null
  },
  index: {
    type: Number,
    default: 0
  },
  itemList: {
    type: Array,
    default: []
  },
  activeId: {
    type: [Number, String],
    default: null
  }
})

// copy
const copyItem = () => {
  emits('copyItem', props.item, props.itemList)
}
// delete
const deleteItem = () => {
  emits('deleteItem', props.index, props.itemList)
}
// active item
const activeItem = () => {
  emits('activeItem', props.item)
}
// binding props
const initProps = (opts: any) => {
  const data = cloneDeep(props.item || {})
  for (let key in data) {
    if (data[key]) opts[key] = data[key]
  }
  delete opts.__config__
  delete opts.__slot__
  delete opts.__methods__
}

// render
const dom: any = computed(() => {
  const bindProps: any = {};
  initProps(bindProps);
  const tag = props.item.__config__.tag,
    layout = props.item.__config__.layout,
    vModel = props.item.__vModel__,
    defaultValue = props.item.__config__.defaultValue;
  switch (layout) {
    case "colFormItem":
      if (vModel) {
        let value = defaultValue
        if (value !== '' && value !== null && value !== undefined) {
          try {
            switch (tag) {
              case 'a-range-picker':
                value = JSON.parse(value)
                break;

              default:
                break;
            }
          } catch (error) {
            switch (tag) {
              case 'a-range-picker':
                value = []
                break;

              default:
                break;
            }
          }
        } else {
          value = null
        }
        bindProps.value = value
        bindProps.onChange = (e) => {
          let inputVal = e?.target?.value || e
          try {
            switch (tag) {
              case 'a-range-picker':
                inputVal = JSON.stringify(inputVal)
                break;
              default:
                break;
            }
          } catch (error) {
            inputVal = []
          }
          props.item.__config__.defaultValue = inputVal
        }
      }
      break;
    default:
      break;
  }
  return h(resolveComponent('a-col'), {
    span: props.item.__config__.span || '',
    class: (props.activeId === props.item.__config__.formId ? 'active-drag-item draging-item' : 'draging-item') + ' form-item-a-col',
    onClick: activeItem
  }, () => [
    h(resolveComponent('a-form-item'), {
      label: (props.item.__config__.showLabel ? props.item.__config__.label : '') || '',
      required: props.item.__config__.required
    }, () => [h(resolveComponent(props.item.__config__.tag), {
      ...bindProps
    })]),
    h(resolveComponent('a-popconfirm'), {
      title: '确定复制?',
      okText: '确认',
      cancelText: "取消",
      onConfirm: copyItem
    }, () => [
      h('span', {
        title: '复制',
        class: 'draging-item-copy'
      }, [h(CopyOutlined)])
    ]),
    h(resolveComponent('a-popconfirm'), {
      title: '确定删除?',
      okText: '确认',
      cancelText: "取消",
      onConfirm: deleteItem
    }, () => [
      h('span', {
        title: '删除',
        class: 'draging-item-delete'
      }, [h(DeleteOutlined)])
    ])
  ])
})

</script>

<style lang="less">

.form-item-a-col {
  width: 100%;
  // float: left;
  display: inline-block;
}

.draging-item,
.drawing-row-item {
  &:hover {
    &>.ant-form-item {
      background: #eceefd;
      border-radius: 6px;
    }

    &>.draging-item-copy,
    &>.draging-item-delete {
      display: initial;
    }
  }

  &>.draging-item-copy,
  &>.draging-item-delete {
    display: none;
    position: absolute;
    top: -10px;
    width: 22px;
    height: 22px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    font-size: 12px;
    border: 1px solid;
    cursor: pointer;
  }

  &>.draging-item-copy {
    right: 56px;
    border-color: #3498fc;
    color: #3498fc;
    background: #fff;

    &:hover {
      background: #3498fc;
      color: #fff;
    }
  }

  &>.draging-item-delete {
    right: 24px;
    border-color: #F56C6C;
    color: #F56C6C;
    background: #fff;

    &:hover {
      background: #F56C6C;
      color: #fff;
    }
  }
}

.active-drag-item {
  &>.ant-form-item {
    background: #eceefd;
    border-radius: 6px;
  }

  &>.draging-item-copy,
  &>.draging-item-delete {
    display: initial;
  }

  &>.component-name {
    color: #3498fc;
  }
}

.ant-form-item {
  margin-bottom: 15px;
}

.draging-item {
  position: relative;
  cursor: move;

  &.unfocus-bordered:not(.active-drag-item)>div:first-child {
    border: 1px dashed #ccc;
  }

  .ant-form-item {
    padding: 12px 10px;
  }
}

.drawing-row-item {
  position: relative;
  cursor: move;
  box-sizing: border-box;
  border: 1px dashed #ccc;
  border-radius: 3px;
  padding: 0 2px;
  margin-bottom: 15px;

  .drawing-row-item {
    margin-bottom: 2px;
  }

  .ant-col {
    float: left;
    margin-top: 22px;
  }

  .ant-form-item {
    margin-bottom: 0;
  }

  .drag-wrapper {
    min-height: 80px;
  }

  &.active-drag-item {
    border: 1px dashed #3498fc;
  }

  .component-name {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
    color: #bbb;
    display: inline-block;
    padding: 0 6px;
  }
}
</style>